<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>文档处理</title>
        <style>
          div {
            background: lavenderblush;
            padding: 20px;
          }
          p {
            background: lemonchiffon;
            padding: 20px;
          }
        </style>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script>
          $(function () {
            // append() - 在被选元素的结尾插入内容
            $('#btn1').click(function () {
              $('div').append('<br/>新添加的文本<br/>');
              $('div').append('<p>新添加的段落</p>');
            });
            //prepend() - 在被选元素的开头插入内容
            $('#btn2').click(function () {
              $('div').prepend('<br/>新添加的文本<br/>');
              $('div').prepend('<p>新添加的段落</p>');
            });
            //after() - 在被选元素之后插入内容
            $('#btn3').click(function () {
              $('div').after('<br/>新添加的文本<br/>');
              $('div').after('<p>新添加的段落</p>');
            });
            //before() - 在被选元素之前插入内容
            $('#btn4').click(function () {
              $('div').before('<br/>新添加的文本<br/>');
              $('div').before('<p>新添加的段落</p>');
            });
          });
        </script>
      </head>
      <body>
        <button id="btn1">append</button>
        <button id="btn2">prepend</button>
        <button id="btn3">after</button>
        <button id="btn4">before</button>

        <div>div1</div>
      </body>
    </html>
  </body>
</html>
